<template>
    <div class="app-detail">

        <el-form :model="viewModel" ref="viewRef" label-width="98px" :rules="isView?null:rules">
            <el-card class="box-card">
                <div class="container-header">
                    <div class="hign-line"></div>
                    <div class="header-left">
                      {{ $t('costPassThrough.basicInformation') }}
                    </div>
                </div>
                <el-row :gutter="20" class="mb8">
                    <!-- 事业部 -->
                    <el-col :span="8">
                        <el-form-item :label="$t('inspectionStandards.division')" prop="divisionName">
                            <division-dialog v-model="viewModel.divisionName" :disabled="isView" @callback="(row)=>viewModel.divisionId=row.divisionId" />
                        </el-form-item>
                    </el-col>
                    <!-- 基地 新增 -->
                    <el-col :span="8">
                        <el-form-item  :label="$t('basicData.baseName')" prop="baseName">
                            <base-dialog v-model="viewModel.baseName" :disabled="isView" @callback="(row)=>viewModel.baseId=row.baseId"/>
                        </el-form-item>
                    </el-col>

                   <!--  厂区 -->
                   <el-col :span="8">
                        <el-form-item :label="$t('inspectionManagement.plantArea')" prop="factoryName">
                            <plantAreaSelect  v-model="viewModel.factoryName" @callback="(e)=>viewModel.factoryCode=e" :disabled="isView"/>
                        </el-form-item>
                    </el-col>


                    <!-- 物料名称 -->
                    <el-col :span="8">
                        <el-form-item :label="$t('mrbForm.materialName')" prop="materialName">
                            <material-dialog :disabled="isView" v-model="viewModel.materialName" @callback="changepro" />
                        </el-form-item>
                    </el-col>

                    <!-- 申请人 -->
                    <el-col :span="8">
                        <el-form-item :label="$t('inventoryManagement.purchaser')" prop="applyName">
                            <el-input v-model="viewModel.applyName" disabled clearable size="small"    />
                        </el-form-item>
                    </el-col>
                    <!-- 标题 -->
                    <el-col :span="8">
                        <el-form-item :label="$t('costPassThrough.title')" prop="shiftTitle">
                            <el-input v-model="viewModel.shiftTitle" aria-readonly="true"  clearable size="small"    />
                        </el-form-item>
                    </el-col>
                     <!-- 申请分部 -->
                     <el-col :span="8">
                        <el-form-item :label="$t('costPassThrough.applyForBranch')" prop="applyDivisionName">
                            <el-input v-model="viewModel.applyDivisionName" disabled clearable size="small"    />
                        </el-form-item>
                    </el-col>
                     <!-- 申请部门 -->
                     <el-col :span="8">
                        <el-form-item :label="$t('costPassThrough.applicationSector')" prop="applyDeptName">
                            <el-input v-model="viewModel.applyDeptName" disabled clearable size="small"    />
                        </el-form-item>
                    </el-col>
                     <!-- 物料采购部门 -->
                     <el-col :span="8">
                        <el-form-item :label="$t('costPassThrough.materialPurchasingDepartment')" prop="procureDeptName">
                            <el-input v-model="viewModel.procureDeptName" disabled clearable size="small"    />
                        </el-form-item>
                    </el-col>
                    <!-- 选择工序 news-->
                    <el-col :span="8">
                        <el-form-item :label="$t('home.process')" prop="processCode">
                            <el-input v-model="viewModel.processCode" :disabled="isView" clearable size="small"    />
                          <!-- <process-dialog v-model="viewModel.processCode" :disabled="isView" @callback="processChange" :multiple="true"/> -->
                        </el-form-item>
                    </el-col>

                    <!-- 成本中心名称-->
                    <el-col :span="8">
                        <el-form-item :label="$t('costPassThrough.costCenterName')" prop="costDeptName">
                             <!-- <el-input  v-model="viewModel.costDeptName"  :disabled="isView"   size="mini" :placeholder="$t('public.inputPl')"/> -->
                            <costCenterDialog  v-model="viewModel.costDeptName" :disabled="isView" @callback="(e)=>viewModel.costDept=e"  />
                        </el-form-item>
                    </el-col>
                    <!-- 成本中心编码-->
                    <el-col :span="8">
                        <el-form-item :label="$t('costPassThrough.costCenterCode')" prop="costDept">
                             <el-input  v-model="viewModel.costDept" :disabled="isView" size="mini" :placeholder="$t('public.inputPl')"/>
                        </el-form-item>
                    </el-col>
                    <!-- 成本中心负责人-->
                    <el-col :span="8">
                        <el-form-item :label="$t('costPassThrough.costCenterManager')" prop="costDeptLeaderName">
                            <select-user-dialog v-model="viewModel.costDeptLeaderName" :disabled="isView" @sendData="(row) => handleRespName(row)" />
                        </el-form-item>
                    </el-col>
                    <!-- 绑定MRB单号-->
                    <el-col :span="8">
                        <el-form-item :label="$t('costPassThrough.bindMrbOrderNumber')" prop="mrbOrder">
                             <el-input  v-model="viewModel.mrbOrder" :disabled="isView" size="mini" :placeholder="$t('public.inputPl')"/>
                        </el-form-item>
                    </el-col>
                    <!-- 转嫁内容(1-材料;2-费用;3-指标)-->
                    <el-col :span="8">
                        <el-form-item :label="$t('costPassThrough.passOnContent')" prop="shiftClazz">
                            <el-select v-model="viewModel.shiftClazz" clearable :placeholder="$t('public.selectPl')" style="width: 100%"
                            size="small" :disabled="isView">
                                <el-option v-for="dict in shiftClazzList" :key="dict.value"
                                :label="dict.label" :value="dict.value"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- 单晶端问题-->
                    <el-col :span="8">
                        <el-form-item :label="$t('costPassThrough.singleCrystalEndProblem')" prop="singleCrystal">
                            <el-select v-model="viewModel.singleCrystal" clearable :placeholder="$t('public.selectPl')" style="width: 100%"
                            size="small" :disabled="isView">
                                <el-option v-for="dict in singleCrystalList" :key="dict.value"
                                :label="dict.label" :value="dict.value"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                     <!-- 钢线批次异常-->
                     <el-col :span="8">
                        <el-form-item :label="$t('costPassThrough.steelWireBatchAbnormalit')" prop="steelWireBatch">
                            <el-select v-model="viewModel.steelWireBatch" clearable :placeholder="$t('public.selectPl')" style="width: 100%"
                            size="small" :disabled="isView">
                                <el-option v-for="dict in singleCrystalList" :key="dict.value" :label="dict.label" :value="dict.value"/>
                            </el-select>
                        </el-form-item>
                    </el-col>


                </el-row>

            </el-card>
            <el-card class="box-card" style="margin-top: 20px;">
                <div class="container-header">
                    <div class="hign-line"></div>
                    <div class="header-left">
                      {{ $t('costPassThrough.detailedDescription') }}
                    </div>
                </div>
                <el-row :gutter="20" class="mb8">
                     <!-- 发生开始时间  -->
                     <el-col :span="8">
                        <el-form-item :label="$t('costPassThrough.occurrenceStartTime')" prop="startTime">
                            <el-date-picker  v-model="viewModel.startTime" type="datetime" :disabled="isView"  :placeholder="$t('public.selectPl')" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" size="mini">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <!-- 结束时间  -->
                    <el-col :span="8">
                        <el-form-item :label="$t('public.endTime')" prop="endTime">
                            <el-date-picker  v-model="viewModel.endTime" type="datetime" :disabled="isView"  :placeholder="$t('public.selectPl')" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" size="mini">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <!-- 班次  -->
                    <el-col :span="8">
                        <el-form-item :label="$t('mrbForm.classes')" prop="workType">
                            <el-select v-model="viewModel.workType" clearable :placeholder="$t('public.selectPl')" style="width: 100%"
                            size="small" :disabled="isView">
                                <el-option v-for="dict in workTypeList" :key="dict.value"
                                :label="dict.label" :value="dict.value"/>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <!-- 批次号 -->
                    <el-col :span="8">
                        <el-form-item :label="$t('inspectionManagement.lot')" prop="lot">
                            <el-input v-model="viewModel.lot" :disabled="isView" clearable size="small"    />
                        </el-form-item>
                    </el-col>
                    <!-- 检验批号 -->
                    <el-col :span="8">
                        <el-form-item :label="$t('mrbForm.InspectBatchNo')" prop="inspectionLotMark">
                            <el-input v-model="viewModel.inspectionLotMark" :disabled="isView" clearable size="small"    />
                        </el-form-item>
                    </el-col>
                     <!-- 转嫁供应商名称 -->
                     <el-col :span="8">
                        <el-form-item :label="$t('costPassThrough.passThroughSupplierName')" prop="shiftSupplierName">
                            <customerDialog v-model="viewModel.shiftSupplierName" :disabled="isView" @callback="SupplierChange"  />
                        </el-form-item>
                    </el-col>
                     <!-- 转嫁供应商编码-->
                     <el-col :span="8">
                        <el-form-item :label="$t('costPassThrough.passOnSupplierCode')" prop="shiftSupplierCode">
                            <el-input v-model="viewModel.shiftSupplierCode" disabled  clearable size="small"    />
                        </el-form-item>
                    </el-col>
                     <!-- 索赔金额 -->
                     <el-col :span="8">
                        <el-form-item :label="$t('costPassThrough.claimAmount')" prop="claimAmount">
                            <el-input v-model="viewModel.claimAmount" :disabled="isView"  clearable size="small"    />
                        </el-form-item>
                    </el-col>
                     <!-- 客户名称 -->
                     <el-col :span="8">
                        <el-form-item :label="$t('client.clientName')" prop="customerName">
                            <el-input v-model="viewModel.customerName" :disabled="isView"  clearable size="small"    />
                        </el-form-item>
                    </el-col>
                    <!-- 是否涉及监造-->
                    <el-col :span="8">
                        <el-form-item :label="$t('costPassThrough.whetherSupervisionIsInvolved')" prop="concernProduce">
                            <el-select v-model="viewModel.concernProduce" clearable  :placeholder="$t('public.selectPl')" style="width: 100%"
                            size="small" :disabled="isView">
                                <el-option v-for="dict in singleCrystalList" :key="dict.value"
                                :label="dict.label" :value="dict.value"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- 异常描述-->
                    <el-col :span="24">
                        <el-form-item :label="$t('costPassThrough.exceptionDescription')" prop="abnormalRemark">
                            <el-input v-model="viewModel.abnormalRemark" :disabled="isView" type="textarea" maxlength="1000" :placeholder="$t('public.inputPl')" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>


            </el-card>

            <el-card class="box-card" style="margin-top: 20px;">
                <div class="container-header">
                    <div class="hign-line"></div>
                    <div class="header-left">
                      {{ $t('costPassThrough.countersignInformation') }}
                    </div>
                </div>
                <el-row :gutter="20" class="mb8">
                    <!-- 转嫁类型  -->
                    <el-col :span="24">
                        <el-form-item :label="$t('costPassThrough.passThroughType')" prop="shiftType">
                            <el-select v-model="viewModel.shiftType" clearable :placeholder="$t('public.selectPl')" style="width: 100%"
                            size="small" :disabled="isView">
                                <el-option v-for="dict in shiftTypeList" :key="dict.value" :label="dict.label" :value="dict.value"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- 会签人  -->
                    <el-col :span="24">
                        <el-form-item :label="$t('costPassThrough.countersigner')" prop="userids">
                            <!-- <el-select v-model="viewModel.userids" multiple  clearable :placeholder="$t('public.selectPl')" style="width: 100%"
                            size="small" :disabled="isView" filterable>
                                <el-option v-for="dict in approvalUserslist" :key="dict.userId" :label="dict.nickName" :value="dict.userId"/>
                            </el-select> -->
                            <approvalUsersDialog v-model="viewModel.userids" :disabled="isView" @sendData="senduseridData" :multiple="true"/>
                        </el-form-item>
                    </el-col>

                     <!-- 附件  -->
                    <el-col :span="24">
                        <el-form-item :label="$t('mrbForm.attachment')" prop="file">
                            <file-upload v-model="viewModel.file" :otherList="fileList"  :bizType="'COST_FILE'"
                            :bizId="viewModel.id"  :disabled="isView"></file-upload>
                        </el-form-item>
                    </el-col>

                </el-row>


            </el-card>

            <el-card class="box-card" style="margin-top: 20px;">
                <div class="container-header">
                    <div class="hign-line"></div>
                    <div class="header-left">
                      {{ $t('costPassThrough.detailedInformation') }}
                    </div>
                </div>

                <costItem ref="costItem" :itemData="costItemData" @callback="submitCallback" :disabled="isView" :fid="viewModel.id"></costItem>

            </el-card>

            <el-card class="box-card" style="margin-top: 20px;" v-if="viewtype>=2">
                <div class="container-header">
                    <div class="hign-line"></div>
                    <div class="header-left">
                      {{ $t('backlog.approvalidea') }}
                    </div>
                </div>

                <el-form :model="auditModel" size="small" label-suffix=":"  ref="auditForm"   label-width="110px">

                    <el-form-item :label="$t('inventoryManagement.approvalStatus')"  >
                        <el-radio-group v-model="auditModel.status" :disabled="approvaldisable">
                            <el-radio :key="item" :label="item" v-for="(item,idx) in  ['1','2'] ">
                              {{ ['通过','不通过'][idx] }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item :label="$t('backlog.approvalidea')"  >
                        <el-input type="textarea" :disabled="approvaldisable"
                        v-model="auditModel.approvalRemark" maxlength="1000" :autosize="{ minRows: 5, maxRows: 6 }">
                        </el-input>
                    </el-form-item>

                </el-form>

            </el-card>
        </el-form>
        <div class="submit-footer">
            <el-button icon="el-icon-close" size="small" @click="closeTab" class="drawer-close">{{$t('public.close')}}</el-button>
            <!-- 暂存 -->
            <el-button type="primary" v-if="!isView" @click="submitAddForm" :loading="loading" icon="el-icon-check" size="mini">{{ $t('public.saveStorage') }}</el-button>
            <!-- 提交审核 -->
            <el-button type="primary" v-if="viewModel.status==0 || viewModel.status==8" @click="submitStatue" :loading="loading" icon="el-icon-check" size="mini">{{ $t('public.submit') }}</el-button>
            <!-- 审核 -->
            <el-button type="primary" v-if="viewtype==2 && !approvaldisable" @click="approvalSubmit" :loading="loading" icon="el-icon-check" size="mini">{{ $t('public.define') }}</el-button>
        </div>

    </div>

</template>

<script>
import DivisionDialog from '@/views/components/DivisionDialog'
import BaseDialog from '@/views/components/BaseDialog'
import approvalUsersDialog from '@/views/components/approvalUsersDialog'
import MaterialDialog from '@/views/components/MaterialDialog/index2.vue'
import processDialog from '@/views/components/processDialog'
import customerDialog from '@/views/components/customerDialog'
import plantAreaSelect from '@/views/components/plantAreaSelect'
import {saveOrUpdateAPI,costInfoAPI,initInfoAPI,approvalUserslistAPI,approvalAPI,submitApprovalAPI,flowNodeInfoAPI} from "@/api/costShift"

import SelectUserDialog from '@/views/components/SelectUserDialog'
import costItem from "@/views/components/costItem"
import costCenterDialog from "@/views/components/costCenterDialog"
import {geFileByBiz} from '@/api/file/file'
export default {
    name: 'addInspectionForm',
    dicts: [],
    components: {
        plantAreaSelect,
        processDialog,
        DivisionDialog,
        BaseDialog,
        approvalUsersDialog,
        MaterialDialog,
        SelectUserDialog,
        customerDialog,
        costItem,
        costCenterDialog
    },
    data() {
        return {
            viewModel:{
                 shiftTitle:''
            },
            process:[],
            isView:false,
            factoryList:[],
            loading:false,
            disabled:false,
            rules:{
                divisionName:[{
                        required: true,
                        message: this.$t('formValidation.businessUnitCannotBeEmpty'),
                        trigger: 'change',
                }],
                baseName:[{
                        required: true,
                        message: this.$t('formValidation.baseCannotBeEmpty'),
                        trigger: 'change',
                }],
                factoryName:[{
                        required: true,
                        message: this.$t('formValidation.factoryAreaCannotBeEmpty'),
                        change: 'blur',
                }],
                materialName:[{
                        required: true,
                        message: this.$t('formValidation.materialNameCannotBeEmpty'),
                        change: 'blur',
                }],
                applyName:[{
                        required: true,
                        message: this.$t('formValidation.applicantCannotBeEmpty'),
                        change: 'blur',
                }],
                processCode:[{
                        required: true,
                        message: this.$t('formValidation.processCannotBeEmpty'),
                        change: 'blur',
                }],
                costDeptName:[{
                        required: true,
                        message: this.$t('formValidation.costCenterCannotBeEmpty'),
                        change: 'blur',
                }],
                startTime:[{
                        required: true,
                        message: this.$t('formValidation.occurrenceStartTimeCannotBeEmpty'),

                }],
                endTime:[{
                        required: true,
                        message: this.$t('formValidation.endTimeCannotBeEmpty'),
                }],
                shiftSupplierName:[{
                        required: true,
                        message: this.$t('formValidation.passthroughSupplierCannotBeEmpty'),
                }],
                abnormalRemark:[{
                        required: true,
                        message: this.$t('formValidation.exceptionDescriptionCannotBeEmpty'),
                }],
                shiftType:[{
                        required: true,
                        message: this.$t('formValidation.thePassThroughTypeCannotBeEmpty'),
                }],
                userids:[{
                        required: true,
                        message: this.$t('formValidation.countersignerCannotBeEmpty'),
                }],
            },
            id: this.$route.params.id,
            processList:[],
            // 1-材料;2-费用;3-指标
            shiftClazzList:[
                {value:"1",label:"材料"},
                {value:"2",label:"费用"},
                {value:"3",label:"指标"},
            ],
            singleCrystalList:[
                {value:"0",label:"否"},
                {value:"1",label:"是"},
            ],
            // 1-白班;2-夜班;3-白夜班
            workTypeList:[
                {value:"1",label:"白班"},
                {value:"2",label:"夜班"},
                {value:"3",label:"白夜班"},
            ],
            // 1-白班;2-夜班;3-白夜班
            shiftTypeList:[
                {value:"1",label:"内部"},
                {value:"2",label:"外部"},

            ],
            fileList:[],
            costItemData:[],
            approvalUserslist:[],
            auditModel:{
                status:1
            },
            viewtype:0,
            approvalNodeId:'',
            approvaldisable:false,
            fileLists:[],
            submitType:0
        }
    },
    created() {
        // this.getapprovalUserslist()
        if (this.$route.params.id != '0' && this.$route.params.id) {
            this.isView= this.$route.query.view ? true : false
            this.viewtype= this.$route.query.view
            this.approvalNodeId=this.$route.query.approvalNodeId
            this.getInfoById()
            if(this.approvalNodeId){
                this.getflowNodeInfo()
            }
        }else{
            this.initInfo()
        }

    },
    watch:{
        'viewModel.shiftTitle':{
			handler(newval,oldval){
					this.viewModel.shiftTitle=this.getNewTitle()
			},
			immediate:true
		}
    },
    methods: {
        getflowNodeInfo(){
            flowNodeInfoAPI(this.approvalNodeId).then(res=>{
                this.auditModel=res.data
                this.approvaldisable=res.data.status>0
            })
        },

        approvalSubmit(){
            var data={
                id:this.approvalNodeId,
                ...this.auditModel
            }
            console.log(data)
            approvalAPI(data).then(res=>{
                this.$message.success("审核成功")
                this.closeTab()
            })
        },
        senduseridData(row){
            console.log(row)
            this.viewModel.userList=row.map(item=>{
                return {
                    "userId":item.userId,
                    "userName":item.userName,
                    "nickName":item.nickName
                }
            })
            console.log(this.viewModel.userList)
            this.$nextTick(()=>{
                this.$refs.viewRef.validateField('userids')
            })
        },
        getapprovalUserslist(){
            approvalUserslistAPI().then(res=>{
                this.approvalUserslist=res.rows
            })
        },
        getNewTitle(){

            //标题：自动生成，规律为基地名称+工厂名称+物料名称+转嫁单+当前日期
            var baseName=this.viewModel.baseName ? this.viewModel.baseName : ""
            var factoryName=this.viewModel.factoryName ? this.viewModel.factoryName : ""
            var materialName=this.viewModel.materialName ? this.viewModel.materialName : ""
            var tit='转嫁单'
            var formatDate=this.formatDate()
            return baseName+factoryName+materialName+tit+formatDate
        },
        formatDate() {
            var date = new Date()
            var year = date.getFullYear()
            var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
            var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
            return year + '' + month + '' + day
        },
        // 提交
        submitStatue(){

            this.$refs.viewRef.validate((valid) => {
                if (valid) {
                    this.submitType=1
                     this.$refs.costItem.submitAddForm()

                }else{
                    this.$nextTick(() => {
                        let isError = document.getElementsByClassName('is-error')
                        isError[0]?.scrollIntoView({
                            // 滚动到指定节点
                            // 值有start,center,end，nearest，当前显示在视图区域中间
                            block: 'start',
                            // 值有auto、instant,smooth，缓动动画（当前是慢速的）
                            behavior: 'smooth',
                        })
                    })
                }
            })
        },
        // 暂存
        submitAddForm(){
            this.submitType=0
            this.$refs.costItem.submitAddForm()

        },
        // 回调
        submitCallback(params) {
            this.loading=true
            let submitData = { ...this.viewModel, detailDtoList: params }
            console.log(submitData)
            let action = this.submitType == '0' ? saveOrUpdateAPI : submitApprovalAPI
            if(this.submitType == '1'){
                 if(params?.length==0){
                  return  this.$message("明细信息未填写")
                 }
            }
            action(submitData).then((res) => {
                this.loading = false
                if (res.code == 200) {
                    this.$modal.msgSuccess('操作成功!')
                    this.closeTab()
                } else {
                    this.$modal.msgError(res.msg)
                }
            })
        },
        /** 关闭操作 */
        closeTab(){
            if(this.viewtype==2){
                this.$router.push({ path: '/costShift/costUser' })
                return
            }
            this.$router.push({ path: '/costShift/costlist' })
        },

        handleRespName(e) {
            this.$set(this.viewModel, 'costDeptLeader', e.deptId)

        },
        initInfo(){
            initInfoAPI().then(res=>{
                this.viewModel=res.data
                this.costItemData=[]
                if (history.state) {
                    console.log('history.state',history.state)
                    var data=history.state
                    this.viewModel.customerName=data.customerName
                    this.viewModel.inspectionLotMark=data.inspectionLotMark
                    this.viewModel.lot=data.lot
                    this.viewModel.mrbOrder=data.mrbOrder
                }
            })
        },
        changepro(row){
            this.viewModel.materialCode=row.materialCode

            this.$nextTick(()=>{
                this.$refs.viewRef.validateField('materialName')
            })
            // this.$forceUpdate()
        },

        getInfoById(){

            costInfoAPI(this.id).then(res=>{
               this.viewModel=res.data
               this.costItemData=res.data.detailDtoList ? res.data.detailDtoList :[]
               this.viewModel.userids=this.viewModel?.userList.map(it=>it.nickName).join(",")
               this.geFileByBizlist()
            })
        },
        processChange(e) {
            this.viewModel.shiftSupplierName= e
            this.$nextTick(()=>{
                this.$refs.viewRef.validateField('processName')
            })
        },
        SupplierChange(e) {
             this.viewModel.shiftSupplierCode= e
            this.$nextTick(()=>{
                this.$refs.viewRef.validateField('shiftSupplierName')
            })
        },
        geFileByBizlist() {
            geFileByBiz({ bizId: this.viewModel.id }).then((res) => {
                let fileList = []
                this.fileLists=res.data
                res.data.forEach((io) => {
                    if (io.bizType === 'COST_FILE') {
                        fileList.push(io)
                    }

                })

                this.fileList = fileList
            })
        },

    },
}
</script>
<style lang="scss" scoped>
::v-deep .el-card {
    padding-top: 20px;
    border: 0px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    padding-bottom: 20px;
}
::v-deep .el-aside {
    padding: 0;
    margin-bottom: 0;
}
.content-style {
    border: 0px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    background-color: white;
    margin-top: 10px;
}
::v-deep .el-button-group .selBtn {
    background: #fff;
    border: 1px solid #0b7be3;
    color: #0b7be3;
}
::v-deep .el-button-group .unselBtn {
    background: #fff;
    border: 1px solid #ededf2;
    color: #666666;
}
.header-left {
    float: left;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 40px;
    display: flex;
    justify-content: center;
}
.header-right {
    float: right;
}
.container-header {
    float: left;
    width: 100%;
    border-bottom: 1px solid #ededf2;
    padding-left: 12px;
}
.container-table {
    float: left;
    margin-top: 6px;
    width: 100%;
    // max-height: calc(100vh - 600px);
    overflow: auto;
}
.mb8 {

    margin-top: 6px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.drawer-footer {
    display: flex;
    position: relative;
    z-index: 9999;
    bottom: -40px;
    height: 40px;
    justify-content: center;
    width: 100%;
}
.hign-line {
    position: relative;
    left: -8px;
    top: 14px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid #0b7be3;
    float: left;
}
.drawer-close {
    background: #f7f8fa;
    border-color: #f7f8fa;
}
.submit-footer {
    height: 52px;
    background: #ffffff;
    box-shadow: 0px -5px 5px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px 4px 0px 0px;
    position: fixed;
    z-index: 9;
    bottom: 0px;
    width: 100%;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.samplingPercent {
    position: absolute;
    z-index: 9;
    right: 20px;
}
::v-deep .el-card {
    padding-top: 0px;
}
.app-detail {
    max-height: calc(100vh - 180px);
    overflow: auto;
}

::v-deep .el-form-item {
    // margin-bottom: 3px !important;
}
</style>
